<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页版微信助手</title>
    <link rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/vue@3.5.13.js"
￼
></script>
    <script src="./js/axios.js"
￼
></script>
</head>

<body>
    <div id="app">
        <div class="wx-container" v-if="!isLogin">
            <h1>使用文件传输助手，手机电脑轻松互传文件。</h1>
            <div class="box" v-show="loginType === 0">
                <img class="change-btn" src="assets/二维码登录.png" alt="" v-on:click="loginType = 1">
                <div class="wx-min-box">
                    <div>微信文件传输助手网页版</div>
                    <button class="wx-login" @click="onLogin()">点击登录</button>
                    <p>使用鼠标点击登录传输文件</p>
                </div>
            </div>

            <div class="box" v-show="loginType === 1">
                <img class="change-btn" src="assets/账号登录.png" alt="" v-on:click="loginType = 0">
                <div class="wx-min-box">
                    <div>微信文件传输助手网页版</div>
                    <img class="code-img" src="assets/code.png" alt="">
                    <p>使用手机微信扫码传输文件</p>
                </div>
            </div>
        </div>

        <div class="wx-chat-box" v-else>
    
            <div class="chat-header-main">
                <div>{{ userInfo.name }}的文件传输助手（{{ userInfo.gender === 0 ? '男' : '女' }}）</div>
                <div class="chat-del">
                    <span class="del" @click="logout()">X</span>
                </div>
            </div>

            <div class="chat-main-box">
                <div class="chat-main-info" v-if="userInfo.chatList.length <= 0">你可以使用「手机微信>文件传输助手」与电脑互传文件</div>
                <div class="chat-main-messages" ref="container">
                    <div class="message-box" v-for="item in userInfo.chatList" :key="item.id">
                        <p class="message">{{ item.content }}</p>
                        <img class="header" :src="userInfo.headerImg" alt="" />
                    </div>
                </div>
            </div>

            <div class="chat-input-box">
                <textarea class="textarea" v-model.trim="msg" @keyup.enter="onSend()" name="" id="" cols="30"
                    rows="8"></textarea>
                <div>
                    <button class="chat-send" @click="onSend()">发送</button>
                </div>
            </div>
        </div>
    </div>

    <script>

        const { createApp, ref, nextTick } = Vue
        createApp({
            setup() {
                const userInfo = ref({
                    name: '老六',
                    gender: 1,   
                    headerImg: 'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/58be7169616e6d6f65723031ga17801000000',
                    chatList: [
                        { id: "1", content: "Hello Html" },
                        { id: "2", content: "Hello JavaScript" },
                    ]
                })

      
                let isLogin = ref(false)
      
                let loginType = ref(0)

                let msg = ref("")


                const container = ref(null)

                isLogin.value = localStorage.getItem("isLogin")
                userInfo.value.chatList = JSON.parse(localStorage.getItem("chatList")) || []


                let onLogin = () => {
                    isLogin.value = true
                    alert("登录成功！")
    
                    localStorage.setItem("isLogin", isLogin.value)
                }

                const onSend = () => {
                    console.log(msg.value.length);

                    if (msg.value.length === 0) {
                        alert("消息不能为空")
                        return
                    }
   
                    let obj = {
                        id: new Date(),
                        content: msg.value
                    }

                    userInfo.value.chatList.push(obj) //

          
                    localStorage.setItem("chatList", JSON.stringify(userInfo.value.chatList))

             
                    scrollToBottom()

         
                    robot(msg.value)
         
                    msg.value = ""
                }

    
                const robot = (value) => {
                
                    axios({
              
                        url: "https://api.sizhi.com/chat?appid=4d5d15da10ae45a185b8d60be40be02f&userid=boot&spoken=" + value,
             
                        method: "GET"
                    }).then(res => {   
                        console.log(res.data.data.info.text);
                   
                        let obj = {
                            id:new Date(),
                            content: res.data.data.info.text
                        }
                    
                        userInfo.value.chatList.push(obj)
                    
                        localStorage.setItem("chatList", JSON.stringify(userInfo.value.chatList))
           
                        scrollToBottom()
                    }).catch(err => { 
                        console.log("请求失败");
                    }) 
                }

         
                const scrollToBottom = () => {
                    
                    nextTick(() => {
                   
                        if (container.value) {
                     
                            container.value.scrollTo({
                                top: container.value.scrollHeight,
                                behavior: "smooth"
                            })
                        }
                    })
                }

           
                const logout = () => {
                
                    localStorage.removeItem("isLogin")               
                    localStorage.removeItem("chatList")
                    isLogin.value = false
                }

        
                return {
                    userInfo,
                    isLogin,
                    loginType,
                    container,
                    onLogin,
                    logout,
                    msg,
                    onSend
                }
            }
        }).mount('#app')
    </script>
</body>

</html>